import { useEffect, useRef, useState } from "react"
import lessModule from "./index.module.less"
import HomePage_ModalComponent_HeaderNormalComponent from "../../../../../../component/modal/component/headerNormal"
import HomePage_ModalComponent_NormalFooterComponent from "../../../../../../component/modal/component/normalFooter"
import L, { LatLngExpression, marker } from 'leaflet';
import HomePage_ModalComponent_NormalFormComponent from "../../../../../../component/modal/component/normalForm"
import { FormInstance } from "antd/lib"
import { $eventBus, $EventBus_off, $EventBus_on, $selectOptionData } from "../../../../../../../../common/utils";
import { Form, message } from "antd";
import { $Http } from "../../../../../../../../network";

// 主页-数据维护页面-站点维护页面-站点弹窗组件组件
interface homePageDataMaintenancePageSubstationMaintenancePageSubstationModalComponentInterface {
    isReview?: boolean
    sourceData: object
    change_cancel: Function
}
const HomePage_DataMaintenancePage_SubstationMaintenancePage_SubstationModalComponent: React.FC<homePageDataMaintenancePageSubstationMaintenancePageSubstationModalComponentInterface> = (props) => {
    
    const [form] = Form.useForm()
    const [mainOptionList, setMainOptionList] = useState<Array<object>>(props.sourceData["main"]?.map((item: string) => { return { label: `${item}#` } }) ?? [])
    const [errLineList, setErrLineList] = useState<Array<string>>([])
    const formItemList = [
        {
            label: "站点名称",
            key: "stationName",
            type: "input",
            placeholder: "请选择",
            isRequire: true,

        },
        {
            label: "巡维中心",
            key: "maintainCentre",
            type: "input",
            placeholder: "请输入",
            isRequire: true,
        },
        {
            label: "电压等级",
            key: "volLevel",
            type: "select",
            placeholder: "请选择",
            optionList: $selectOptionData["voltageLevel"],
            isRequire: true,
        },
        {
            label: "主变台数（1~5）",
            key: "mainCount",
            type: "inputNumber",
            placeholder: "请输入",
            min: 1,
            max: 5,
            precision: 0,
            isRequire: true,
        },
        {
            key: "main",
            hide: true
        },
        {
            label: "监测主变（多选）",
            key: "monitorMain",
            type: "multipleSelect",
            placeholder: "请选择",
            optionList: mainOptionList,
        },
        {
            label: "站点地图默认显示主变",
            key: "showMain",
            type: "select",
            placeholder: "请选择",
            optionList: mainOptionList,
            isRequire: true,
        },

        {
            label: "接地点（多选）",
            key: "groundPoint",
            type: "multipleSelect",
            placeholder: "请选择",
            optionList: mainOptionList,
            isRequire: true,
        },
        {
            label: "经度（-180~180）",
            key: "longitude",
            type: "inputNumber",
            placeholder: "请输入",
            min: -180,
            max: 180,
            isRequire: true,

        },
        {
            label: "纬度（-90~90）",
            key: "latitude",
            type: "inputNumber",
            placeholder: "请输入",
            min: -90,
            max: 90,
            isRequire: true,

        },
        {
            type: "map",
            styleData: {
                width: "100%",
                height: 240,
            },
            width: "100%",
        },
        {
            label: "站点地址",
            key: "address",
            type: "input",
            placeholder: "请选择",
        },
        {
            label: "值班电话",
            key: "tel",
            type: "input",
            placeholder: "请选择",
        },
        {
            label: "直连站点（多选）",
            key: "connecSiteName",
            type: "multipleBtn",
            monitoringType: "站点",
            monitorModalName: `选择安装站点`,
            width: "100%"
        },
        {
            key: "connecSite",
            hide: true
        },
        {
            label: "关联线路",
            key: "line",
            width: "100%"
        
        },
    ]

    // 广播函数数据
    const eventBusFuncData = {
        // 提交操作
        submitOperation: (data: object) => {
            form.validateFields().then((data) => {
                data["connecSiteName"] ??= []
                data["connecSite"] ??= []
                data["line"] ??= []
                props.sourceData["type"] === "see" ? props.change_cancel() : $Http(props.sourceData["type"] === "add" ? "create" : "edit", { typeName: "数据维护/站点维护", ...data, ...(props.sourceData["type"] === "edit" && { id: props.sourceData["id"] }) }).then((res) => {
                    message.success(res["success"])
                    props.change_cancel(true)
                }).catch((err) => {
                    setErrLineList([...err["list"]])
                })
            })
        }
    }

    useEffect(() => {
        $EventBus_on(eventBusFuncData)

        return () => {
            $EventBus_off(eventBusFuncData)
        }
    }, [])
    
    return (
        <div className={lessModule["homePageDataMaintenancePageSubstationMaintenancePageSubstationModalComponent"]}>
            {
                !props.isReview && <HomePage_ModalComponent_HeaderNormalComponent name={props.sourceData["type"] === "add" ? "新增变电站（站点）" : props.sourceData["type"] === "edit" ? "编辑变电站（站点）" : "站点详情"} padding="15px 24px" change_cancel={props.change_cancel} />
            }
            <main className={lessModule["homePageDataMaintenancePageSubstationMaintenancePageSubstationModalComponent-main"]}>
                <HomePage_ModalComponent_NormalFormComponent form={form} type={props.sourceData["type"]} formItemList={formItemList} sourceData={props.sourceData} errLineList={errLineList} change_mainOptionList={setMainOptionList} />
            </main>
            {
                !props.isReview && <HomePage_ModalComponent_NormalFooterComponent change_cancel={props.change_cancel} />
            }
        </div>
    )
}
export default HomePage_DataMaintenancePage_SubstationMaintenancePage_SubstationModalComponent